import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
    app.directive('img-lazy',{
      mounted(el, binding) {
          //el:指令绑定的哪个元素
          //binding.value:指令等号后面绑定的表达式值  图片URL
          const { stop } = useIntersectionObserver(
              el,
              ([{isIntersecting}]) => {
                if(isIntersecting){
                    console.log(binding.value);

                    // 当元素进入视口时，设置图片的src属性
                    el.src = binding.value
                    // 停止观察
                    stop();
                }
              },
            )
        }
    })
  }
}
